<template>
	<view class="container">
		<!-- 表单部分 -->
		<form>
			<view class="inputView">
				<view>
					<view class="title">账户余额</view>
				</view>
				<view class="context">
					<!-- <input placeholder="请输入"  bindinput="handleNameInput"  /> -->
					<view>￥{{this.merchantInfo.currentBalance}}</view>
				</view>
			</view>
			<view class="inputView">
				<view>
					<view class="title">提现金额</view>
				</view>
				<view class="context1">
					<uni-easyinput v-model="withdraw" @input="handleWithdrawInput" class="tx" :input-border="false"
						primaryColor="#E8E8E8"></uni-easyinput>
					<view class="unit">元</view>
				</view>
			</view>
			<view class="inputView">
				<view>
					<view class="title">真实姓名</view>
				</view>
				<view class="context1">
					<uni-easyinput v-model="name" @input="handleNameInput" :input-border="false"
						primaryColor="#E8E8E8"></uni-easyinput>
				</view>
			</view>
			<view class="inputView">
				<view>
					<view class="title">请选择银行</view>
				</view>
				<view class="context1">
					<!-- <input placeholder="请输入"  bindinput="handleNameInput"  /> -->
					<uni-data-select v-model="value" :localdata="range" @change="change"
						class="select-component"></uni-data-select>
				</view>
			</view>
			<view class="inputView">
				<view>
					<view class="title">请输入银行卡卡号</view>
				</view>
				<view class="context1">
					<!-- <input v-model="cardNumber" /> -->
					<uni-easyinput v-model="cardNumber" @input="handleCardNumberInput" :input-border="false"
						primaryColor="#E8E8E8"></uni-easyinput>

				</view>
			</view>
			<view class="notice">xxx不会通过任何渠道泄露您的个人信息，请放心填写</view>
			<button class="button" @click="affirmDialog">确认信息并提交</button>
		</form>

		<!-- 提现记录 -->
		<view class="record-info">
			<view class="record">提现记录</view>
			<view class="service" v-for="item in withdrawRecordList" :key="item.id">
				<view class="records">
					<view>商家提现记录</view>
					<view class="withdrawalDate">{{item.withdrawalRecord}}</view>
				</view>
				<view class="time-status">
					<view>-{{item.cashWithdrawal}}</view>
					<view v-if="item.status == 0">审核中</view>
					<view v-if="item.status == 1">提现成功</view>
					<view v-if="item.status == 2">提现失败</view>
				</view>
			</view>
		</view>
		
		<!-- 确认信息提示窗示例 -->
		<uni-popup ref="affirmDialog" type="dialog">
			<uni-popup-dialog cancelText="关闭" confirmText="确认" title="通知" content="请确保信息无误"
				@confirm="affirmConfirm"></uni-popup-dialog>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				withdrawRecordList:[],
				merchantInfo: {},
				value: '', //选择银行
				name: '', //真实姓名
				withdraw: '',  //提现金额
				cardNumber: '', //银行卡号
				range: [{
						value: 0,
						text: "工商银行"
					},
					{
						value: 1,
						text: "建设银行"
					},
					{
						value: 2,
						text: "农业银行"
					},
				],
			};
		},
		methods: {
			getData() {
				uni.request({
					url: 'http://localhost/dev-api/business/balance/shop/' + '1',
					method: 'GET',
					header: {
						Authorization: getApp().globalData.token
					},
					success: resp => {
						this.merchantInfo = resp.data.data
						// console.log(resp.data.data);
					},
				})
			},
			getListData() {
				uni.request({
					url: 'http://localhost/dev-api/business/withdrawal/list/',
					method: 'GET',
					header: {
						Authorization: getApp().globalData.token
					},
					success: resp => {
						this.withdrawRecordList = resp.data.rows
						console.log(resp.data.rows);
					},
				})
			},
			setData() {
				uni.request({
					url: 'http://localhost/dev-api/business/withdrawal/',
					data:{
						merchantId:1,
						cashWithdrawal:this.withdraw,
						realName:this.name,
						bankCardNumber:this.cardNumber,
						currentBalance:this.merchantInfo.currentBalance
					},
					method: 'POST',
					header: {
						Authorization: getApp().globalData.token
					},
					success: resp => {
						setTimeout(() => {
							this.$router.go(0)
						}, 0)
						console.log(resp.data);
					},
				})
			},
			affirmDialog(){
				this.$refs.affirmDialog.open()
			},
			affirmConfirm(){
				this.setData()
				//请确保信息无误
			},
			handleInput(e) {
				// 处理输入  
				console.log('输入内容：', e.detail.value);
			},
			toSave(e) {
				// 阻止表单默认提交事件  
				e.preventDefault();
				// 执行提交逻辑  
				console.log('表单提交');
			},
			change(e) {
				// // 假设 e.detail.value 是从下拉菜单中选择的选项的 value  
				// const selectedBank = this.range.find(bank => bank.value === e.detail.value);
				// console.log(this);
				// if (selectedBank) {
				// 	// 更新 value 字段以包含银行的文本  
				// 	this.value = selectedBank.text;
				// } else {
				// 	// 如果没有找到匹配的选项，可以重置 value 或进行其他处理  
				// 	this.value = '';
				// }
				console.log("选择变化:", e);
			},
			handleWithdrawInput() {
				// 处理提现余额输入事件
			},
			handleNameInput() {
				// 处理真实姓名输入事件
			},
			handleCardNumberInput() {
				// 处理银行卡卡号输入事件
			},
			clearWithdraw() {
				this.withdraw = '';
			},
			clearName() {
				this.name = '';
			},
			clearCardNumber() {
				this.cardNumber = '';
			},
		},
		onLoad() {
			this.getData(),
			this.getListData()
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	/* 表单部分 */
	.inputView {
		margin: 18rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #efefef;
	}

	.title {
		padding-left: 28rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		color: #000;
		font-size: 28rpx;
		font-weight: bold;
		white-space: nowrap;
	}

	.context {
		margin-left: 85rpx;
		color: #F73A2F;
		font-weight: bold;
	}

	.context1 {
		margin-left: 85rpx;
		height: 50rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
	}


	.tx {
		width: 146rpx;
		height: 50rpx;
		margin-top: -45rpx;
		/* border: 1rpx solid #eee; */
		margin-right: 18rpx;
		padding: 5rpx;
	}

	.select-component {
		width: 350rpx;
		margin-top: -20rpx;
		/* #ifdef MP-WEIXIN 
		margin-bottom:30rpx;
		/* #endif */
		height: 40rpx;
		margin-left: -28rpx;
		border-radius: 0;
	}

	.notice {
		color: #8C8B8B;
		/* margin: 20rpx; */
		padding-left: 65rpx;
		font-size: 24rpx;
	}

	.button {
		margin-top: 30rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		font-weight: bold;
		width: 302rpx;
		height: 80rpx;
		border-radius: 16rpx;
		background-color: rgba(13, 122, 247, 1);
		color: rgba(255, 255, 255, 1);
	}

	/* 提现记录 */
	.record-info {
		margin: 10rpx;
	}

	.record {
		margin-left: 35rpx;
		padding: 15rpx 0;
		font-weight: bold;
		font-size: 30rpx;
	}

	.service {
		margin: 0 15rpx;

		display: flex;
		padding-bottom: 10rpx;
		border-bottom: 1rpx solid rgba(187, 187, 187, 1);
	}

	.records {
		width: 360rpx;
		height: 110rpx;
	}

	.records>view:nth-child(1) {
		margin: 15rpx;
		font-size: 28rpx;
		color: rgb(16, 16, 16);
		font-weight: bold;
	}

	.time-status {
		width: 210rpx;
		height: 110rpx;
		margin-left: 140rpx;
		margin-right: 20rpx;
		text-align: right;
	}

	.time-status>view:nth-child(1) {
		margin: 15rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: rgb(16, 16, 16);
	}
	
	.withdrawalDate{
		padding-left: 16rpx;
	}
</style>